require(['./config'],()=>{
    require(['template', 'request','elevatezoom','header2', 'footer','jquery'], (template, req)=>{
        class List{
            constructor(){
                this.getListData()
                this.num=0
            }
            //拿到id值获取数据，返回给list页面
            getListData(){
                const id = window.location.search.split('=')[1] //拿到网址，按着等号切割，取第一位
                req.getListData(id,this.num)
                    .then(res => {
                        if (res.code === 200) {
                            // 渲染页面
                            this.render(res.data.items)
                        }
                    })
            }
            render(res){
                // console.log(res)
                let that =this
                // 先把 list 数据解构出来 
                const { list } = res
                let a =0
                console.log($('.list > ul').html())
                $('.list > ul').html($('section .list > ul').html()+template('listTemplate',{list}))
 
                document.querySelectorAll('section .list ul .listid').forEach((item,index)=>{
                    let id = item.getAttribute('prodid')
                    req.getDetailsData(id)
                    .then(res => {
                        //    console.log(res)
                        if (res.code === 200) {
                            let photoId =res.data.detail.photo[0].itemId-0
                            console.log(photoId)
                            let itemId=item.getAttribute('prod')-0
                            console.log(itemId)
                            a+=1
                            if(photoId===itemId){
                                console.log(a)
                                let photo = res.data.detail.photo
                                // console.log()
                                $('section .list > ul .imglist')[index].innerHTML = template('xiaotu',{photo})
                            }
                            // $('.list > ul .imglist').html(template('xiaotu',{photo}))
                            $('.imglist img').first().css({
                                borderStyle:'solid',
                                borderWidth:1,
                                borderColor:'#ff6700'
                            })
                            $('.imglist img').click(function(){
                                $(this).css({
                                    borderStyle:'solid',
                                    borderWidth:1,
                                    borderColor:'#ff6700'
                                }).siblings().css({
                                    borderStyle:'solid',
                                    borderWidth:1,
                                    borderColor:'#e0e0e0'
                                })
                                let src = $(this).attr('src')
                                $(this).parent().parent().find('.bigimg').attr('src',src);
                            })
                        }
                    })
                })
                this.xiala()
            }
            //无限下拉
            xiala(){
                let a = true
                window.onscroll = ()=>{
                    let ym = $(document).height()-1300
                    if(document.documentElement.scrollTop>ym){
                        if(a){
                            a=false
                            const id = window.location.search.split('=')[1]
                            this.num+=20
                            console.log(this.num)
                            req.getListData(id,this.num)
                                .then(res => {
                                    if (res.code === 200) {
                                        // 渲染页面
                                        this.render(res.data.items)
                                    }
                                    a = true
                                })
                        }
                        
                    }
                }
                
            }
            
        }
        return new List()
    })
})